/*
* 查看优惠券 (弃用)
* @Author: Li Yujie
* @Date: 2020-11-14
*/
<template>
    <div class="container">
        <div class="detail-card">
            <!--基本信息-->
            <div class="card-title">基本信息</div>
            <div class="card">
                <div class="card-item">
                    <div class="item-title">优惠券名称：</div>
                    <div class="item-content">{{ detailData.title }}</div>
                </div>
                <div class="card-item">
                    <div class="item-title">发放总量：</div>
                    <div class="item-content">{{ detailData.total_num_max }}张</div>
                </div>
                <div class="card-item">
                    <div class="item-title">每人限额：</div>
                    <div class="item-content">{{ detailData.get_limit_count }}张</div>
                </div>
                <div class="card-item">
                    <div class="item-title">渠道类型：</div>
                    <div class="item-content">{{ detailData.channel_category | channelType }}</div>
                </div>
                <div class="card-item">
                    <div class="item-title">领券时间：</div>
                    <div class="item-content">
                        {{ detailData.get_start_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }} -
                        {{ detailData.get_end_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                    </div>
                </div>
                <div class="card-item">
                    <div class="item-title">使用时间：</div>
                    <div class="item-content">
                        <div v-if="detailData.use_time_type === 1">
                            {{ detailData.use_start_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }} -
                            {{ detailData.use_end_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                        </div>
                        <div v-else>领取后{{ detailData.use_day_duration }}天内使用</div>
                    </div>
                </div>
            </div>
            <!--/基本信息-->

            <!--优惠规则-->
            <div class="card-title">优惠规则</div>
            <div class="card">
                <div class="card-item">
                    <div class="item-title">优惠类型：</div>
                    <div class="item-content">{{ detailData.type === 1 ? '金额减免' : '金额抵扣' }}</div>
                </div>
                <div class="card-item">
                    <div class="item-title">使用门槛：</div>
                    <div class="item-content">
                        <div v-if="detailData.discount_limit_type === 0">无使用门槛</div>
                        <div v-if="detailData.discount_limit_type === 1">订单满{{ detailData.discount_limit }}元</div>
                        <div v-if="detailData.discount_limit_type === 2">订单满{{ detailData.discount_limit }}件</div>
                    </div>
                </div>
                <div class="card-item">
                    <div class="item-title">优惠内容：</div>
                    <div class="item-content">减免{{ detailData.discount_num }}元</div>
                </div>
                <div class="card-item">
                    <div class="item-title">适用商品：</div>
                    <div
                        class="item-content"
                        v-if="detailData.use_limit_type === 1"
                    >
                        全部商品可用
                    </div>
                    <div
                        class="item-content"
                        v-if="detailData.use_limit_type === 2"
                    >
                        指定商品可用
                    </div>
                    <div
                        class="item-content"
                        v-if="detailData.use_limit_type === 4"
                    >
                        指定商品不可用
                    </div>
                </div>
                <div class="card-item">
                    <div class="item-title">优惠叠加：</div>
                    <div class="item-content">
                        <div v-if="detailData.combine_type === 0">
                            优惠券仅售价购买商品时可用，不可与其他优惠券活动叠加
                        </div>
                        <div v-if="detailData.combine_type === 1">
                            可与其他优惠券活动等营销活动叠加
                        </div>
                    </div>
                </div>
                <div class="card-item">
                    <div class="item-title">领券人限制：</div>
                    <div class="item-content">{{ detailData.get_student_limit_type | receiveLimit }}</div>
                </div>
                <div class="card-item">
                    <div class="item-title">公开限制：</div>
                    <div class="item-content">
                        {{ detailData.show === 1 ? '优惠券允许公开领取' : '优惠券不允许公开领取' }}
                    </div>
                </div>
                <div class="card-item">
                    <div class="item-title">使用说明：</div>
                    <div class="item-content">{{ detailData.desc }}</div>
                </div>
            </div>
            <!--/优惠规则-->
        </div>
        <div
            class="btn-group"
            v-if="isExamine"
        >
            <el-button @click="rejectDialog = true">
                不通过
            </el-button>
            <el-button
                type="primary"
                @click="handleExamine('pass')"
            >
                通过
            </el-button>
        </div>
        <!-- 拒绝弹窗 -->
        <el-dialog
            title="驳回原因"
            :visible.sync="rejectDialog"
            width="614px"
            :close-on-click-modal="false"
            @close="reason = ''"
        >
            <div class="form-title">不通过原因</div>
            <el-input
                v-model="reason"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6}"
                placeholder="请输入不通过的原因"
                maxlength="140"
                show-word-limit
            />
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    @click="rejectDialog = false"
                    size="medium"
                    type="default"
                    :style="{width: '120px', marginRight: '32px'}"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '120px'}"
                    :disabled="!reason"
                    @click="handleExamine('reject')"
                >
                    确 定
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "Detail",
    data() {
        return {
            detailData: {},
            isExamine: false,
            // 审核通过确认弹窗
            passDialog: false,
            // 驳回 确认弹窗
            rejectDialog: false,
            // 要审核的优惠券id
            examineId: '',
            // 审核不通过原因
            reason: ''
        };
    },
    filters: {
        receiveLimit(val) {
            switch (val) {
                case 0:
                    return '不限制';
                case 1:
                    return '新用户可领';
                case 2:
                    return '指定学校';
                case 3:
                    return '指定代理等级';
                case 4:
                    return '一卡通会员用户可领';
                default:
                    return '';
            }
        },
        channelType(val) {
            switch (val) {
                case 'shop':
                    return '商城';
                case 'private_area':
                    return '私域';
                case 'stuagent':
                    return '代理';
                case 'student_vip':
                    return '一卡通会员';
                default:
                    return '--';
            }
        }
    },
    mounted() {
        this.couponNo = this.$route.query.no;
        this.isExamine = this.$route.query.examine == 1 && this.$route.query.verify == 1;
        this.getDetailData();
    },
    methods: {
        /**
         * 获取详情信息
         */
        getDetailData() {

            let params = {
                coupon_no: this.couponNo
            };

            this.$post('/student/shop_goods_coupon%5Cget', params, resp => {
                if (resp.code === 1) {
                    this.detailData = resp.data;
                } else {
                    this.$notify({
                        title: '失败',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },
        /**
         * 审核
         */
        handleExamine(action, reason = this.reason) {

            let params = {
                coupon_no: this.couponNo,
                action,
                reason
            };

            this.$post('/student/shop_goods_coupon%5Caudit', params, resp => {
                if (resp.code === 1) {
                    this.$message.success('操作成功');
                    this.rejectDialog = false;
                    this.passDialog = false;
                    this.isExamine = false;
                } else {
                    this.$notify({
                        title: '失败',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });

        },
    }
};
</script>

<style scoped lang="less">
.detail-card {
    margin: 0 24px 24px;
    padding: 32px;
    border-radius: 2px;
    border: 1px solid #EEEEEE;

    .card-title {
        height: 60px;
        line-height: 60px;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        border-bottom: 1px solid #E9E9E9;
    }

    .card {
        padding: 24px;

        .card-item {
            display: flex;
            margin: 32px 0;
            font-weight: 400;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            line-height: 1.5;

            .item-title {
                width: 100px;
                color: #888;
                text-align: right;
            }

            .item-content {
                font-weight: 400;
                color: #333333;
                width: 80%;
            }
        }
    }

}

.btn-group {
    margin-left: 56px;
    margin-bottom: 24px;

    .el-button {
        width: 120px;
        margin-right: 22px;
    }
}

/*弹窗样式*/
.form-title {
    margin: 16px 0;
    font-size: 14px;
    color: #333;
    padding-left: 10px;
    position: relative;

    &::before {
        content: "*";
        display: block;
        color: #FF3030;
        position: absolute;
        left: 0;
        top: 0;
    }
}

/deep/ .el-dialog__header {
    padding-top: 10px;
    box-shadow: 0px 1px 0px 0px rgba(233, 233, 233, 1);
    display: flex;
    align-items: center;
    background: #FAFAFA;
    border-radius: 4px 4px 0 0;

    .el-dialog__title {
        font-weight: 500;
        color: #333;
        font-size: 14px;
    }

    .el-icon-close:before {
        color: rgb(194, 194, 194);
        font-size: 17px;
        font-weight: bold;
    }

    .el-dialog__headerbtn {
        top: 14px;
    }
}

.el-textarea__inner {
    resize: none;
}
</style>
